<!DOCTYPE html>
  <meta charset="utf-8">
  <head></head>
 
    
 
 <body>
 <canvas id="yuanxing" width="1000" height="1000"></canvas>
 <script type=text/javascript>
 	/*
 	 * context是一个封装了很多绘图功能的对象，获取这个对象的方法是  
       var context =canvas.getContext("2d");--画图的是2D类型，不是3D立体形状
 	 */
 var canvas=document.getElementById("yuanxing");
 var context=canvas.getContext("2d");
 context.fillStyle="#FF0000";//绘图填充样式
 context.beginPath();//创建路径
 /*创建圆形路径时需要用到对象的arc方法，
  * 方法定义如：XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)
	x为圆形起点的横坐标，y为圆形起点的纵坐标，radius为圆形半径，startAngle为开始角度，
	endAngle为结束角度，anticlockwise是否按顺时针方向进行绘制。
  */
 context.arc(700,400,200,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆
 context.closePath();//关闭路径
 context.fill();//填充，每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
 </script>
 </body>
</html>
